<template>
    <div class="container">
        <div class="bk_image">
            <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
                <defs>
                    <!-- 定义图案 -->
                    <pattern id="pattern" width="9" height="9" patternUnits="userSpaceOnUse">
                        <circle r="1"/>
                    </pattern>
                    <!-- 定义数字魔法滤镜 -->
                    <filter id="digitalMagic">
                        <feTurbulence baseFrequency=".05">
                            <animate attributeName="baseFrequency" values="0.2; 0.21; 0.2" dur="500s" begin="0s" repeatCount="indefinite"/>
                        </feTurbulence>
                        <feComposite in2="SourceGraphic" operator="in"/>
                        <feMorphology operator="dilate" radius="3"/>
                        <feColorMatrix values="0 0 0 9 -2 0 0 0 9 -.25 0 0 0 9 0 0 0 0 9 0"/>
                        <feColorMatrix values="-.3  -.4 -.17 0 1 -.5 .05 -.15 0 .12 -.37 -.45 -.13 0 1 0.5 0 0 0 1"/>
                        <feColorMatrix values="-.3  -.4 -.17 0 1 -.5 .05 -.15 0 .12 -.37 -.45 -.13 0 1 0.5 0 0 0 1"/>
                        <feColorMatrix values="-.3  -.4 -.17 0 1 -.5 .05 -.15 0 .12 -.37 -.45 -.13 0 1 -1 0 0 0 1"/>
                        <feColorMatrix values="-.3  -.4 -.17 0 1 -.5 .05 -.15 0 .12 -.37 -.45 -.13 0 1 -1.4 0 0 0 1"/>
                        <feColorMatrix values="-.3  -.4 -.17 0 1 -.5 .05 -.15 0 .12 -.37 -.45 -.13 0 1 0.5 0 0 0 1"/>
                    </filter>
                    <!-- 定义线性渐变 -->
                    <linearGradient id="grad" gradientTransform="rotate(90)">
                        <stop offset="15%" stop-color="#000000" stop-opacity="1"/>
                        <stop offset="100%" stop-color="#ff62ff" stop-opacity="0.1"/>
                    </linearGradient>
                </defs>
                <rect width="100%" height="120%" fill="url(#pattern)" filter="url(#digitalMagic) brightness(1000%) invert(100%) hue-rotate(195deg)"/>
                <rect width="100%" height="100%" fill="url(#grad)"/>
            </svg>
        </div>
        <h2> {{ webName }} </h2>
        <div class="code_box">
            <div class="bot"></div>
            <div class="bot"></div>
            <div class="bot"></div>
            <code>
                let webName = ref('王申洄的博客网站');
            </code>
        </div>
        <div class="code_box code_box2">
            <div class="bot"></div>
            <div class="bot"></div>
            <div class="bot"></div>
            <code>
                while (life < end) { <br/>
                   &nbsp;&nbsp; love++; <br/>
                }
            </code>
        </div>
        <div class="code_box code_box3">
            <div class="bot"></div>
            <div class="bot"></div>
            <div class="bot"></div>
            <code>
                // 写这段代码的时候，只有上帝和我知道它是干嘛的 <br>
                // 现在只有上帝知道
            </code>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

let webName = ref('王申洄的博客网站');


</script>

<style scoped>
    .container {
        margin: 0 auto;
        position: relative;
    }
    .bk_image{
        position: absolute;
        height: 85vh;
        width: 100%;
    }
    svg {
        top: 0px;
        height: 100%;
        width: 100%;
    }
    h2 {
        position: absolute;
        top: 20px;
        left: 20px;
        color: var(--color-text-blue);
        transition: all 0.5s;
    }
    h2:hover{
        color: var(--color-text-blue-hover);
    }

    .code_box{
        position: absolute;
        height: 80px;
        width: 300px;
        background-color: var(--vt-c-code-bk);
        border-radius: 10px;
        box-shadow: 0 0 10px 0 var(--vt-c-code-bk-box-shadow);
        transition: all 0.5s;
        right: 0px;
        top: 120px;
        padding: 20px;
        -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    .code_box2{
        right: 80px;
        top: 210px;
        height: 100px;
    }

    .code_box3{
        right: -20px;
        top: 320px;
        height: 80px;
        width: 420px;
    }

    .bot:nth-child(1){
        content: '';
        position: absolute;
        top: 8px;
        left: 10px;
        width: 10px;
        height: 10px;
        background-color: #badc58;
        border-radius: 50%;
    }
    .bot:nth-child(2){
        content: '';
        position: absolute;
        top: 8px;
        left: 25px;
        width: 10px;
        height: 10px;
        background-color: #686de0;
        border-radius: 50%;
    }
    .bot:nth-child(3){
        content: '';
        position: absolute;
        top: 8px;
        left: 40px;
        width: 10px;
        height: 10px;
        background-color: #eb4d4b;
        border-radius: 50%;
    }
    /* 动画效果 */
    /* ----------------------------------------------
    * Generated by Animista on 2024-2-22 17:32:53
    * Licensed under FreeBSD License.
    * See http://animista.net/license for more info. 
    * w: http://animista.net, t: @cssanimista
    * ---------------------------------------------- */

    /**
    * ----------------------------------------
    * animation slide-left
    * ----------------------------------------
    */
    @-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100px);
                transform: translateX(-100px);
    }
    }
    @keyframes slide-left {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100px);
                transform: translateX(-100px);
    }
    }

</style>